<template>
  <vue-content>
    <vue-header>
      <vue-header-form>
        <el-form :inline="true" :model="formFilter" ref="formFilter">
          <el-form-item label="名称" prop="paramName">
            <el-input v-model="formFilter.paramName" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="所属系统" prop="usageKey">
            <el-select v-model="formFilter.usageKey" placeholder="所属系统">
              <el-option label="积分" value="JF"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="SearchSubmit('formFilter')">查询</el-button>
            <el-button @click="resetForm('formFilter')">重置</el-button>
          </el-form-item>
        </el-form>
      </vue-header-form>
      <vue-header-button>
        <el-button type="primary" @click="create">新增</el-button>
      </vue-header-button>
    </vue-header>
    <vue-body>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="paramName"
          label="名称">
        </el-table-column>
        <el-table-column
          label="所属系统">
          <template scope="scope">
            {{ scope.row.usageKey | usageKey }}
          </template>
        </el-table-column>
        <el-table-column
          label="数据类型">
          <template scope="scope">
            {{ scope.row.dataType | type }}
          </template>
        </el-table-column>
        <el-table-column
          label="条件类型">
          <template scope="scope">
            {{ scope.row.condType | condType }}
          </template>
        </el-table-column>
        <el-table-column
          label="选择方式">
          <template scope="scope">
            {{ scope.row.selType | selType }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
      </el-table-column>
      </el-table>
    </vue-body>
    <vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pageSize">
      </el-pagination>
    </vue-footer>
    <edit-active ref="edit-active" :view="view"/>
  </vue-content>
</template>

<script>
  import {query, del} from '@/services/actives'
  import {RequestError} from '@/services/errors'
  import EditActive from './edit'
  export default {
    name: 'actives-table',
    components: {EditActive},
    data: () => ({
      tableData: [],
      currentPage: 1,
      pageSize: 0,
      formFilter: {
        paramName: undefined,
        usageKey: undefined
      },
      view: ''
    }),
    methods: {
      async loadData () {
        let data = (await query(Object.assign({}, {currentPage: this.currentPage}, this.formFilter)))
        this.tableData = data.pageQueryParam
        this.pageSize = data.totalResult
      },
      create () {
        this.view = 'create'
        this.$nextTick()
        this.$refs['edit-active'].dialogFormVisible = true
        this.$refs['edit-active'].formData = {
          paramCode: '',
          paramName: '',
          paramDesc: '',
          usageKey: '',
          dataType: '',
          parentCode: '',
          condType: '',
          selType: '',
          paramOrder: '',
          flagEnable: '',
          crtId: '',
          channel: ''
        }
      },
      handleEdit (index, data) {
        this.view = 'edit'
        this.$nextTick()
        this.$refs['edit-active'].dialogFormVisible = true
        this.$refs['edit-active'].formData = Object.assign({}, data)
      },
      handleDelete (index, data) {
        this.$confirm(`此操作将删除${data.paramName}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await del(data.id, data.paramCode)
            this.$message({
              type: 'success',
              message: '已删除'
            })
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, '提示', {
                type: 'error',
                confirmButtonText: '确定'
              })
            } else {
              throw e
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      SearchSubmit () {
        this.currentPage = 1
        this.loadData()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.currentPage = 1
        this.loadData()
      }
    },
    watch: {
      currentPage (newVal) {
        this.loadData(newVal)
      }
    },
    filters: {
      type (val) {
        return {'c': '字符串', 'n': '数字'}[val]
      },
      condType (val) {
        return ['默认', '大于', '小于', 'between'][val]
      },
      selType (val) {
        return ['text', 'checkbox', 'radio', 'select', 'number', 'date', 'input', 'time'][val]
      },
      usageKey (val) {
        return {'JF': '积分'}[val]
      }
    },
    created () {
      this.loadData()
    }
  }
</script>
